import React, {Component, Fragment} from "react";
import {BackUp, FormPart, LoginContainer, Space, Title, VideoBackground} from './style';
import {renderRoutes} from "react-router-config";
import {connect} from "react-redux";
import {Col, Row} from 'antd';
import {GlobalOutlined, LeftOutlined, LockOutlined} from '@ant-design/icons';
import './style.css'

class Login extends Component {
    constructor(props) {
        super(props);

        this.state = {
            confirmVisible: false
        }
    }

    render() {
        const {route} = this.props
        return (
            <Fragment>
                <VideoBackground width={this.props.width} height={this.props.height} autoPlay muted loop>
                    <source src={"https://just-game.oss-cn-beijing.aliyuncs.com/sucai/background-video.mp4"}/>
                </VideoBackground>
                {/* 返回按钮 */}
                <LoginContainer
                    style={{
                        overflowY: 'hidden',
                        width: '100%',
                        height: this.props.height,
                        zIndex: 100,
                    }}>
                    <BackUp onClick={() => window._ROUTER_.push('/home')}>
                        <Row gutter={[6, 6]}>
                            <Col>
                                <LeftOutlined style={{color: '#fff'}}/>
                            </Col>
                            <Col>
                                <label>返回</label>
                            </Col>
                        </Row>
                    </BackUp>
                    <FormPart>
                        <Title>
                            <Row gutter={[16, 16]}>
                                <Col span={24}>
                                    <Row gutter={[16, 16]}>
                                        <Col span={12}>

                                                <span
                                                    className={window.location.pathname === '/login' ? 'select' : null}
                                                    onClick={() => window._ROUTER_.push('/login')}
                                                    key={'login'}><LockOutlined/> 密码登录</span>
                                        </Col>
                                        <Col span={12}>
                                                <span
                                                    className={window.location.pathname === '/login/sign' ? 'select' : null}
                                                    onClick={() => window._ROUTER_.push('/login/sign')}
                                                    key={'sign'}><GlobalOutlined/> 立即注册</span>
                                        </Col>
                                    </Row>
                                </Col>
                            </Row>
                        </Title>
                        <Space/>
                        {
                            renderRoutes(route.routes)
                        }
                    </FormPart>
                </LoginContainer>
            </Fragment>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        width: state.getIn(['window', 'width']),
        height: state.getIn(['window', 'height']),
        TopSearchWords: state.getIn(['header', 'TopSearchWords'])
    }
}
const mapStateToDispatch = (dispatch) => {
    return {}
}

export default connect(mapStateToProps, mapStateToDispatch)(Login);
